<template>
	<view class="page-box">
		<view class="form-item-box" v-for="(item,index) in listData" :key='index'>
			<view class="label-box">
				{{item.label}}
			</view>
			<input v-if="item.types=='normal'" :type="item.type" v-model="form[item.value]" class="input-box" focus :placeholder="item.placeholder" :maxlength='item.maxlength || 140'/>
			<view class="phone-box" v-else>
				<input class="phone-input-box" v-model="form[item.value]" focus :placeholder="item.placeholder" :maxlength='item.maxlength || 140'/>
				<view class="phone-btn-box" @click="getCaptcha" v-if="countDown>60">
					获取验证码
				</view>
				<view class="phone-btn-box dis-btn" v-else>
					{{countDown}}秒
				</view>
			</view>
		</view>
		<view class="save-btn-box" @click="saveClick">
			保存
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form:{
					status:1,
					pay_pwd1:'',
					pay_pwd2:'',
					phone:'',
					captcha:''
				},
				listData:[{
				  types:'normal',
					label:'支付密码',
					placeholder:'请输入6位数字支付密码',
					value:'paymentCode',
					type:'password',
					maxlength:6,
					value:'pay_pwd1'
				},
				{
          types:'normal',
					label:'确认密码',
					placeholder:'请输入6位数字支付密码',
					value:'confirmPassword',
					type:'password',
					maxlength:6,
					value:'pay_pwd2'
				},
				{
					label:'手机号码',
					placeholder:'请输入手机号',
					value:'phone',
					maxlength:11,
					value:'phone'
				},
				{
          types:'normal',
					label:'验证码',
					placeholder:'请输入验证码',
					value:'verificationCode',
					type:'input',
					value:'captcha'
				}],
			countDown:61
			}
		},
		methods: {
			getCaptcha(){
				var reg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
				if(reg.test(this.form.phone)){
					this.$https(
						'common.smsSend',
						{
							mobile: this.form.phone,
							event: 'notice'
						},
						'获取验证码中...'
					).then(res => {
						if (res.code === 1) {
							this.$u.toast('验证码已发送，请注意查收短信');
							let self = this
							self.time = setInterval(()=>{
								self.countDown--
								if(self.countDown == 0){
									self.countDown = 61
									clearInterval(self.time)
								}
							},1000)
						} else {
							this.$u.toast(res.msg);
						}
					});
				}else{
					this.$u.toast('请输入正确手机号');
				}
			},
			saveClick(){
				let params = Object.assign({},this.form);
				let self = this
				self.$https(
					'mine.setPayPwdStatus', params,
					'加载中...'
				).then(res => {
					if (res.code === 1) {
						this.$u.toast('密码设置成功');
						uni.navigateBack({
							delta: 1
						});
					} else {
						this.$u.toast(res.msg || '密码设置失败');
					}
				});
			}
		}
	}
</script>

<style scoped lang='scss'>
.page-box{
	width: 100%;
	height: 100vh;
}
.form-item-box{
	width: 100%;
	height: 108rpx;
	padding: 0rpx 24rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #fff;
	border-bottom: 2rpx solid #F3F3F3;
}
.label-box{
	width: 160rpx;
	font-size: 28rpx;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #42494F;
}
.input-box{
	width: calc(100% - 180rpx);
	height: 100%;
	text-align: right;
}
.phone-box{
	width: calc(100% - 180rpx);
	height: 100%;
	display: flex;
	align-items: center;
	.phone-input-box{
		width: calc(100% - 150rpx);
		height: 100%;
		text-align: right;
	}
	.phone-btn-box{
		margin-left: 10rpx;
		width: 140rpx;
		height: 56rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 56rpx;
		opacity: 1;
		border: 2rpx solid #FC5351;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FC5351;
	}
	.dis-btn{
		border: 2rpx solid #D3D3D3;
		color: #D3D3D3;
	}
}
.save-btn-box{
	margin-top: 200rpx;
	margin-left: 5%;
	width: 90%;
	height: 70rpx;
	line-height: 70rpx;
	text-align: center;
	background: #FD8E8A linear-gradient(180deg, #FC5351 0%, #FF6E6D 100%);
	border-radius: 70rpx;
	opacity: 1;
	font-size: 28rpx;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #FFFFFF;
}
</style>
